<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>login</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/index/default.css">
	<link href="__CSS__/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="__CSS__/index/styles.css">
<style>
	.btn{
		position: absolute; top: 0px;right: 0;height: 41px;BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px;
	}
	.error{
		list-style: none;
	}
</style>
</head>
<body>

<div class='login'>
	<button style="position: absolute;top: 4px;left: 19px;" class="button button-large button-plain button-border button-circle"><a href="#" onClick="javascript :history.back(-1);"><i class="fa fa-reply"></i></a></button>
	<div class='login_title'>
		<span>账号注册</span>
	</div>
	<form action="{:url('Login/register')}" id="form" method="post">
	<div class='login_fields'>
		<div class='login_fields__user'>
			<div class='icon'>
				<img src='__IMAGES__/index/user_icon_copy.png'>
			</div>
			<input placeholder='昵称' name="name" id="name" type='text'>
			<div class='validation'>
				<img src='__IMAGES__/index/tick.png'>
			</div>
			</input>
		</div>
		<div class='login_fields__user'>
			<div class='icon'>
				<img style="width: 14px;height: 14px;" src='__IMAGES__/index/phone.png'>
			</div>
			<input placeholder='手机号' name="phone" id="phone"  type='text'  >
			<div class='validation'>
				<img src='__IMAGES__/index/tick.png'>
			</div>
			<input class="btn" id="btn" type="button" value="获取验证码" onclick="checkPhone(this)">
		</div>
		<span id="tishi"></span>
		<div class='login_fields__user'>
			<div class='icon'>
				<img style="width: 14px;height: 14px;" src='__IMAGES__/index/yzm.png'>
			</div>
			<input placeholder='验证码' id="yzm" onblur="yzyam(this)" type='text'>
			<div class='validation'>
				<img src='__IMAGES__/index/tick.png'>
			</div>
			</input>
		</div>
		<span id="yzyzm"></span>
		<div class='login_fields__password'>
			<div class='icon'>
				<img src='__IMAGES__/index/lock_icon_copy.png'>
			</div>
			<input placeholder='密码' id="psw" type='password' name="password">
			<div class='validation'>
				<img src='__IMAGES__/index/tick.png'>
			</div>
		</div>
		<div class='login_fields__user'>
			<div class='icon'>
				<img src='__IMAGES__/index/user_icon_copy.png'>
			</div>
			<input placeholder='邮箱' name="mail" id="mail" type='text'>
			<div class='validation'>
				<img src='__IMAGES__/index/tick.png'>
			</div>
			</input>
		</div>
		<i class="fa fa-eye open" style='color: black;position: absolute; top: 125px;right: 15px;'></i>
		<div class='login_fields__submit'>
			<input type='submit' value='注册' id="submit">
			<div class='forgot'>
				<a style="text-decoration:none;" href="{:url('Index/login')}">已有账号！</a> <a style="text-decoration:none;" href="{:url('Index/login')}">登录?</a>
			</div>
		</div>
	</div>
	</form>
</div>
<script type="text/javascript" src="__JS__/index/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="__JS__/index/jquery-ui.min.js"></script>
<script  src="__JS__/1.js"></script>
<script SRC="__JS__/register.js"></script>
<script >
function yzm(){
	var phone = jQuery("#phone").val();
	var flag = false;
	var message = "";
	var myreg = /^(((1[3-9][0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
	if(phone == ''){
		message = "<span><i style='color: red;position: absolute; top: 35px;right: 0;' class='fa fa-exclamation-triangle'></i></span>";
	}else if(phone.length !=11){
		message = "<span><i style='color: red;position: absolute; top: 35px;right: 0;' class='fa fa-exclamation-triangle'></i></span>";
	}else if(!myreg.test(phone)){
		message = "请输入有效的手机号码！";
	}else {
		flag = true;
	}
	if(!flag){
		jQuery("#tishi").html(message);
	}else{
		jQuery("#tishi").html("<span><i style='color: #009900;position: absolute; top: 35px;right: 0;' class='fa fa-check'></i></span>");
	}
	return flag;
}
var url="{:url('Login/yzm')}";
	var wait=60;
	function time(o) {
		if (wait == 0) {
			o.removeAttribute("disabled");
			o.value="获取验证码";
			wait = 60;
		} else {
			o.setAttribute("disabled", true);
			o.value="重新发送(" + wait + ")";
			wait--;
			setTimeout(function() {
						time(o)
					},
					1000)
		}
	}
function checkPhone(bog){
	if(yzm()){
		jQuery("#tishi").html("<span><i style='color: #009900;position: absolute; top: 35px;right: 0;' class='fa fa-check'></i></span>");
		time(bog)
		$.ajax({
			url:url,
			data: {
				phone:$("#phone").val()
			},
			dataType:"text",
			type:"post",
			success:function(data){
				yzm=data;
			},
			error:function(e){
				alert(e.response)
			}
		})
	}
}
function yzyam(obj){
	if('"'+$(obj).val()+'"'==yzm){
		$("#yzyzm").html("<span><i style='color: #009900;position: absolute; top: 85px;right: 0;' class='fa fa-check'></i></span>");
	}
}
$('.open').on('click',function(){

	if($("#psw").prop('type')=='password'){
		$("#psw").prop('type','text');
		$(".open").css("color","green");
	}else{
		$("#psw").prop('type','password');
		$(".open").css("color","black");
	}
});
</script>
</body>
</html>
